<template>
    <div class="P-parents page">
        <div class="content">
            <div class="parents-crumb">课程表</div>
            <div>
                <my-ke-cheng-list/>
            </div>

            <div class="parents-crumb">
                我的资料
            </div>
            <p style="text-align:right;padding-right: 44px;padding-top: 20px;"
               @click="$router.push({path:'/parent/editor'})">编辑资料</p>
            <div class="coach-con">
                <img :src="myInfo.imgs|filtersImg" style="width:180px;"/>
                <div class="coach-con-center">
                    <div class="coach-con-center-item">
                        <p><span>姓名</span>{{myInfo.name}}</p>
                        <p><span>年龄</span>{{myInfo.age}}</p>
                        <p><span>性别</span>{{myInfo.sex===1?'男':myInfo.sex===2?'女':'未知'}}</p>
                        <p><span>身高</span>{{myInfo.height}}</p>
                        <p><span>体重</span>{{myInfo.weight}}</p>
                        <p><span>教练</span>{{myInfo.coachName}}</p>
                        <p><span>机构</span>{{myInfo.mechanismName}}</p>
                    </div>
                    <div class="coach-con-center-item">
                        <p><span>梯队</span></p>
                        <p><span>伤病</span><span>{{myInfo.woundLogs}}</span></p>
                        <p><span>技巧</span>{{myInfo.skillName}}</p>
                        <p><span>风格</span>{{myInfo.styleName}}</p>
                        <p><span>队伍</span><span>{{myInfo.teamName}}</span></p>
                    </div>

                </div>
                <div class="coach-con-right" style="padding-right:0;">
                    <p>综合能力{{myInfo.sumScoure}}</p>
                    <div id="myChart" style="height:300px;width:500px"></div>
                </div>
            </div>
            <div class="parents-crumb">
                我的资料
            </div>
            <div class="parents-score">
                <div v-for="(item,index) in remarks" :key="index">
                    <div class="parents-score-num">
                        <span class="power">{{item.name}}</span>
                        <span class="num-name">得分</span>
                        <span class="num">{{item.score}}</span>
                    </div>
                    <el-form inline style="margin-top:10px;">
                        <el-row :gutter="20">
                            <el-col :span="8" v-for="(item2, index2) in item.list" :key="index2">
                                <el-form-item style="height: 60px;" label-width="100px" :label="item2.name">
                                    <el-input min="1" oninput="if(value>10)value=10" style="width: 200px" max="10"
                                              type="number"
                                              @input="getscore2"
                                              :disabled="true"
                                              v-model="item2.score"></el-input>
                                    <el-progress :percentage="parseFloat(item2.score*10)" :show-text="false"
                                                 style="margin-top:10px;"></el-progress>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>

            <div class="parents-crumb">我的课程</div>
            <div>
                <my-course-list/>
            </div>

            <div class="parents-crumb">已购课程</div>
            <div>
                <MyCoursePic/>
            </div>
            <div class="parents-crumb">我的建议</div>
            <div class="parent-advice" v-for="(item,index) in sugList" :key="index">
                <h5>{{item.type|filtersoptions(option)}}</h5>
                <pre class="parent-advice-con">
					{{item.content}}
				</pre>
                <p class="parent-advice-time">{{forDate(item.updateTime,'Y-M-D h:m:s')}}</p>
            </div>
            <el-pagination
                    background
                    style="float:right"
                    @current-change="pageChange"
                    layout="prev, pager, next"
                    :total="suggestionsData.total">
            </el-pagination>
            <div class="clear"></div>

        </div>

    </div>
</template>

<script>
    import {mapActions, mapState} from 'vuex'
    import {getTbility} from "../../api/api/coach.js";
    import MyKeChengList from '../../components/player/MyKeChengList'
    import MyCourseList from '../../components/player/MyCourseList'
    import MyCoursePic from '../../components/player/MyCoursePic'
    import {forDate} from '../../utils/utils.js'
    import {baseImgPath, basefile} from '@/config/env.js';

    export default {
        components: {MyKeChengList, MyCourseList, MyCoursePic},
        data() {
            return {
                tableData: [],
                value: '',
                multipleSelection: [],
                myInfo: {},
                remarks: [],

                // 饮食 分页数据
                suggestionsData: {
                    pageSize: 10,
                    pageNum: 1,
                    total: 0
                },

                sugList: [],   // 饮食建议
                searchdatas: {
                    pageSize: 10,
                    pageNum: 1,
                    total: 0,
                    id: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0
                },
                kechenglist: [],
                option: [{
                    label: '专业',
                    value: 0
                }, {
                    label: '饮食',
                    value: 1
                }, {
                    label: '健康',
                    value: 2
                }],
            }
        },

        computed: {
            ...mapState('Login', [
                'userStatus'
            ]),
        },
        created() {
            this.getMyInfo()
            this.getMyInfo2()
            this.getsuggestions()
            this.getTbilitys()
            // this.getKechengList()
        },
        methods: {
            forDate,
            ...mapActions('ScheduleCard', [
                'fetchMyInfo',
                'fetchMyInfo2',
                'suggestions',
                'fetchKechengList',
                'abilitygetList',
            ]),
            getTbilitys() {
                this.abilitygetList({id: sessionStorage.getItem('statusId') ? parseInt(sessionStorage.getItem('statusId')) : 0}).then(res => {
                    const {code, data: {list}} = res;
                    if (code === 200 && list) {
                        console.log(list, 666)
                        this.remarks = list || [];
                    }
                })
            },
            //我的资料 表
            getMyInfo() {
                let id = Number(this.userStatus.statusId)
                this.fetchMyInfo2({id}).then(res => {
                    const {code, data} = res
                    if (code === 200 && data) {
                        this.myInfo = data;
                        this.drawLine()
                    }
                })
            },
            // fetchKechengList
            getKechengList() {
                let id = Number(this.userStatus.statusId)
                this.fetchKechengList(this.searchdatas).then(res => {
                    const {code, data} = res
                    if (code === 200 && data) {
                        this.kechenglist = data;
                    }
                })
            },

            getpingfen() {
                let id = this.id
                this.huoqupingfen({id}).then(res => {
                    this.pingfen = res.data.list
                })
            },

            // 饮食建议
            getsuggestions() {
                this.suggestionsData.playerId = Number(this.userStatus.statusId)
                this.suggestions(this.suggestionsData).then(res => {
                    const {code, data, data: {list, total}} = res
                    if (code === 200 && data) {
                        this.sugList = list
                        this.suggestionsData.total = Number(total)
                    }
                })
            },

            getMyInfo2() {
                let id = Number(this.userStatus.statusId)
                this.fetchMyInfo2({id}).then(res => {
                    const {code, data} = res
                    if (code === 200 && data) {

                    }
                })
            },

            pageChange(val) {
                this.suggestionsData.pageNum = val
                this.getsuggestions()
            },
            // 图表
            drawLine() {
                let valueList = [];
                let nameList = [];
                let myChart = this.$echarts.init(document.getElementById('myChart'));
                this.myInfo.list.forEach(element => {
                    let obj = {
                        text: element.name,
                        max: 10
                    }
                    nameList.push(obj)
                    valueList.push(element.score)
                });
                let data = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        orient: 'vertical',
                        x: 'right',
                        y: 'bottom',
                        data: ['预算分配（Allocated Budget）', '实际开销（Actual Spending）']
                    },
                    toolbox: {
                        show: true,
                        feature: {
                            // mark : {show: true},
                            // dataView : {show: true, readOnly: false},
                            // restore : {show: true},
                            saveAsImage: {show: true}
                        }
                    },
                    polar: [{
                        indicator: nameList
                    }],
                    calculable: true,
                    series: [{
                        name: '预算 vs 开销（Budget vs spending）',
                        type: 'radar',
                        data: [{
                            value: valueList,
                            name: '速度'
                        }]
                    }]
                };
                myChart.setOption(data);
            }
        },

        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
            filtersoptions: function (e, data) {
                for (var i = 0; i < data.length; i++) {
                    if (e == data[i].value) {
                        return data[i].label
                    }
                }
            },
        },
    }
</script>

<style scoped>
    @import url("P-parents.css");

    .P-parents .parents-score {
        padding: 35px 20px 60px 20px;
    }

    .P-parents .parents-score-speed .num-item {
        width: 33.3%;
    }

    .display-flex-column {
        width: 80%;
    }

    .P-parents .coach-con .coach-con-center .coach-con-center-item {
        margin-left: 25px;
    }
</style>
